<template>
	<view class="loading">
		<view>
			<view class="loading-item loading-item1 ">.</view>
			<view class="loading-item loading-item2 ">.</view>
			<view class="loading-item loading-item3 ">.</view>
			<view class="loading-item loading-item4 ">中</view>
			<view class="loading-item loading-item5">载</view>
			<view class="loading-item loading-item6">加</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.loading {
		z-index: 20000;
		width: 100%;
		height: 100vh;
		position: fixed;
	}

	.loading-item {
		font-size: 40rpx;
		width: 160rpx;
		height: 160rpx;
		backface-visibility: hidden;
		position: absolute;
		top: calc(50% - 160rpx);
		left: calc(50% - 80rpx);
		// transform-origin: -4vmin center;
		will-change: transform;
		animation: move 3s linear infinite;
	}

	.loading-item1 {
		color: #4B98FE;
		animation-delay: -0.5s;
		opacity: 0;
	}

	.loading-item2 {
		color: #00D05E;
		animation-delay: -1s;
		opacity: 0;
	}

	.loading-item3 {
		color: #FFAC00;
		animation-delay: -1.5s;
		opacity: 0;
	}

	.loading-item4 {
		color: #FB6A67;
		animation-delay: -2s;
		opacity: 0;
	}

	.loading-item5 {
		color: #957BFE;
		animation-delay: -2.5s;
		opacity: 0;
	}

	.loading-item6 {
		color: #00B9FE;
		animation-delay: -3s;
		opacity: 0;
	}

	@keyframes move {
		0% {
			transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
			will-change: transform;
		}

		30% {
			opacity: 1;
		}

		100% {
			z-index: 10;
			transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
			will-change: transform;
		}
	}
</style>